import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import LoginVue from "../views/login/index.vue";
import { userInfoApi } from "../http/api/index"
import { useUserStore } from "@/store/user";
import { ElMessage } from "element-plus"

const routes: RouteRecordRaw[] = [
    {
        path: "/login",
        component: LoginVue
    },
    {
        path: "/",
        redirect: "/index",
        component: () => import("../views/home/index.vue"),
        children: [
            {
                path: "/index",
                component: () => import("../views/index/index.vue"),
            }
        ]

    }

    // {
    //     path: "/ums",
    //     component: () => import("../views/home/index.vue"),
    //     children: [{ path: "admin", component: LoginVue }]

    // },
]

const router = createRouter({
    routes,
    history: createWebHashHistory(),
});

router.beforeEach((to, from, next) => {
    const store = useUserStore();
    let token = localStorage.getItem("token")
    // 因为每个页面都需要进行 权限的验证，所以在这里面判断 菜单数据有了没有，如果没有，我们需要发请求，来动态获取菜单数据
    if (store.menus.length === 0 && token) {
        // 我们会把请求成功后的菜单数据放在pinia里面
        userInfoApi().then((res) => {
            if (res.code === 200) {
                // 把数据存到pinia
                // pinia里面可以直接修改数据
                store.menus = res.data.menus;
                // 存储用户名
                store.username = res.data.username;
                // 生成 当前这个用户能访问的路由
                // 现在当前用户能访问的所有的路由在 pinia 里面
                store.routes.forEach((p) => {
                    // 路由里面提供了一个方法，用来动态添加路由的
                    const route: RouteRecordRaw = {
                        path: "/" + p.name,
                        name: p.name,
                        component: () => import("../views/home/index.vue"),
                        meta: {
                            title: p.title
                        },
                        children: p.children.map((item) => ({
                            path: item.name,
                            name: item.name,
                            component: () => import(`../views/${p.name}/${item.name}.vue`),
                            meta: {
                                title: item.title
                            },
                        }))
                    };
                    if (p.children[0]) {
                        route.redirect = `/${p.name}/${p.children[0].name}`
                    }
                    router.addRoute(route)
                })
                // 要在路由添加进来之后重新跳转到一个指定的路由,然后才能在动态路由生成之后再跳转到指定的路由
                next(to.fullPath);
            }
        })
        // 判断有无token，如果没有token，并且访问的不是 login 就跳转回login
    } else if (!token && to.path !== "/login") {
        ElMessage.error("请先登录")
        next("/login");
        // 如果已经登录，不能直接通过url回到登陆页
    } else if (token && store.menus.length !== 0 && to.path === "/login") {
        ElMessage.warning("请先退出登录再重新登录")
        // 不让用户访问登录页 ， 跳转回原来的页面
        next(from.fullPath)
    } else {
        next()
    }
})

export default router;